<template>
    <div>
        <el-tabs v-model="activeName" :stretch="true" @tab-click="handleClick">
            <el-tab-pane label="药品总库存" name="medicinesTab">
                <!-- 查询条件开始 -->
                <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
                    <el-form-item label="药品名称" prop="medicinesName">
                        <el-input
                                v-model="queryParams.medicinesName"
                                placeholder="请输入药品名称"
                                clearable
                                size="small"
                                style="width:180px"
                        />
                    </el-form-item>
                    <el-form-item label="关键字" prop="keywords">
                        <el-input
                                v-model="queryParams.keywords"
                                placeholder="请输入关键字"
                                clearable
                                size="small"
                                style="width:180px"
                        />
                    </el-form-item>
                    <el-form-item label="药品类型" prop="medicinesType">
                        <el-select
                                v-model="queryParams.medicinesType"
                                placeholder="药品类型"
                                clearable
                                size="small"
                                style="width:180px"
                        >
                            <el-option
                                    v-for="dict in medicinesTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产厂家" prop="producerId">
                        <el-select
                                v-model="queryParams.producerId"
                                placeholder="生产厂家"
                                clearable
                                size="small"
                                style="width:180px"
                        >
                            <el-option
                                    v-for="dict in producterOptions"
                                    :key="dict.producerId"
                                    :label="dict.producerName"
                                    :value="dict.producerId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处方类型" prop="prescriptionType">
                        <el-select
                                v-model="queryParams.prescriptionType"
                                placeholder="处方类型"
                                clearable
                                size="small"
                                style="width:180px"
                        >
                            <el-option
                                    v-for="dict in prescriptionTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="queryParams.dateRange"
                                size="small"
                                style="width:240px"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="-"
                                start-placeholde="开始日期"
                                end-placeholde="结束日期"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 查询条件结束 -->
                <!-- 数据表格开始 -->
                <el-table border :data="medicinesTableList">
                    <el-table-column label="药品ID" align="center" prop="medicinesId" />
                    <el-table-column label="药品名称" align="center" prop="medicinesName" />
                    <el-table-column label="药品编号" align="center" prop="medicinesNumber" />
                    <el-table-column label="生产厂家" width="280px" align="center" prop="producerId" :formatter="producterFormatter"/>
                    <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter"/>
                    <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
                    <el-table-column label="关键字" align="center" prop="keywords" />
                    <el-table-column label="库存量" align="center" prop="medicinesStockNum" />
                    <el-table-column label="预警值" align="center" prop="medicinesStockDangerNum" />
                    <el-table-column label="状态" prop="status" align="center"  :formatter="statusFormatter" />
                </el-table>
                <!-- 数据表格结束 -->
                <!-- 分页控件开始 -->
                <el-pagination
                        v-show="total>0"
                        :current-page="queryParams.currentPage"
                        :page-sizes="[5, 10, 20, 30]"
                        :page-size="queryParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
                <!-- 分页控件结束 -->
            </el-tab-pane>
            <el-tab-pane label="批次库存及价格" name="inventoryLogTab">
                <!-- 查询条件开始 -->
                <el-form ref="queryLogForm" :model="queryLogParams" :inline="true" label-width="88px">
                    <el-form-item label="采购单据号" prop="purchaseId">
                        <el-input
                                v-model="queryLogParams.purchaseId"
                                placeholder="采购单据号"
                                clearable
                                size="small"
                                style="width:180px"
                        />
                    </el-form-item>
                    <el-form-item label="药品名称" prop="medicinesName">
                        <el-input
                                v-model="queryLogParams.medicinesName"
                                placeholder="请输入药品名称"
                                clearable
                                size="small"
                                style="width:180px"
                        />
                    </el-form-item>
                    <el-form-item label="药品类型" prop="medicinesType">
                        <el-select
                                v-model="queryLogParams.medicinesType"
                                placeholder="药品类型"
                                clearable
                                size="small"
                                style="width:180px"
                        >
                            <el-option
                                    v-for="dict in medicinesTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产厂家" prop="producerId">
                        <el-select
                                v-model="queryLogParams.producerId"
                                placeholder="生产厂家"
                                clearable
                                size="small"
                                style="width:180px"
                        >
                            <el-option
                                    v-for="dict in producterOptions"
                                    :key="dict.producerId"
                                    :label="dict.producerName"
                                    :value="dict.producerId"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="处方类型" prop="prescriptionType">
                        <el-select
                                v-model="queryLogParams.prescriptionType"
                                placeholder="处方类型"
                                clearable
                                size="small"
                                style="width:180px"
                        >
                            <el-option
                                    v-for="dict in prescriptionTypeOptions"
                                    :key="dict.dictValue"
                                    :label="dict.dictLabel"
                                    :value="dict.dictValue"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="queryLogParams.createTime"
                                size="small"
                                style="width:240px"
                                value-format="yyyy-MM-dd"
                                type="daterange"
                                range-separator="-"
                                start-placeholde="开始日期"
                                end-placeholde="结束日期"
                        />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 查询条件结束 -->
                <!-- 数据表格开始 -->
                <el-table border :data="inventoryLogTableList">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="入库号">
                                    <span>{{ props.row.inventoryLogId }}</span>
                                </el-form-item>
                                <el-form-item label="单据号">
                                    <span>{{ props.row.purchaseId }}</span>
                                </el-form-item>
                                <el-form-item label="规格">
                                    <span>{{ props.row.conversion }}{{ props.row.unit }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column label="药品ID" align="center" prop="medicinesId" />
                    <el-table-column label="药品名称" align="center" prop="medicinesName" />
                    <el-table-column label="采购量" align="center" prop="inventoryLogNum" />
                    <el-table-column label="批发价" align="center" prop="tradePrice">
                        <template slot-scope="scope">
                            <span>{{ scope.row.tradePrice }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="批发额" align="center" prop="tradeTotalAmount">
                        <template slot-scope="scope">
                            <span>{{ scope.row.tradeTotalAmount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="批次号" align="center" prop="batchNumber" />
                    <el-table-column label="生产厂家" width="280px" align="center" prop="producerId" :formatter="producterFormatter"/>
                    <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="medicinesTypeFormatter"/>
                    <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="prescriptionTypeFormatter" />
                    <el-table-column label="入库时间" width="180px" align="center" prop="createTime" />
                </el-table>
                <!-- 数据表格结束 -->
                <!-- 分页控件开始 -->
                <el-pagination
                        v-show="total>0"
                        :current-page="queryLogParams.currentPage"
                        :page-sizes="[5, 10, 20, 30]"
                        :page-size="queryLogParams.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                />
                <!-- 分页控件结束 -->
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "inventory",
        // 定义页面数据
        data(){
            return{
                // 当前激活的tab
                activeName: 'medicinesTab',
                // 药品分页数据总条数
                total: 0,
                // 药品查询参数
                queryParams: {
                    pageSize:10,
                    currentPage:1,
                    medicinesName: undefined,
                    medicinesType: undefined,
                    prescriptionType: undefined,
                    producerId: undefined
                },
                // 入库详情查询参数
                queryLogParams: {
                    pageSize:10,
                    currentPage:1,
                    purchaseId: undefined,
                    medicinesName: undefined,
                    medicinesType: undefined,
                    prescriptionType: undefined,
                    producerId: undefined
                },
                createTime:[],
                dateRange: [],
                // 字典表格数据
                medicinesTableList: [],
                // 字典表格数据
                inventoryLogTableList: [],
                // 状态数据字典
                statusOptions: [],
                //药品分类
                medicinesTypeOptions:[],
                //药品处方分类
                prescriptionTypeOptions:[],
                //可用的生产厂家
                producterOptions:[],
            }
        },
        //勾子
        created() {
             // 查询表格数据
            this.getMedicinesList()
            //加载状态
            this.initStatus()
        },
        methods:{
            // 点击tab调用的事件
            handleClick(tab, event) {
                if (this.activeName === 'medicinesTab') {
                    this.getMedicinesList()
                } else if (this.activeName === 'inventoryLogTab') {
                    this.getInventoryLogList()
                }
            },
            // 查询药品表格数据
            getMedicinesList(){
                this.$axios.post("/stock/medic/med/getAll/"+this.queryParams.currentPage+"/"+this.queryParams.pageSize,this.queryParams).then(result=>{
                    this.medicinesTableList=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            // 查询入库记录表格数据
            getInventoryLogList() {
                this.$axios.post("/stock/invent/inv/findInvAll/"+this.queryLogParams.currentPage+"/"+this.queryLogParams.pageSize,this.queryLogParams).then(result=>{
                    this.inventoryLogTableList=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            //加载状态
            initStatus(){
                this.$axios.get("/stock/prod/dict/data/findByType/sys_normal_disable").then(result=>{
                    this.statusOptions=result.data.data;
                })
                // 查询药品处方分类字典数据
                this.$axios.get("/stock/prod/dict/data/findByType/his_prescription_type").then(result=>{
                    this.prescriptionTypeOptions=result.data.data;
                })
                // 查询药品分类字典数据
                this.$axios.get("/stock/prod/dict/data/findByType/his_medicines_type").then(result=>{
                    this.medicinesTypeOptions=result.data.data;
                })
                // 查询所有可用的生产厂家
                this.$axios.get("/stock/prod/prod/selectAllProdName/").then(res => {
                    this.producterOptions = res.data.data;
                })
            },
            // 翻译药品类型
            medicinesTypeFormatter(row) {
                return this.formatDict(this.medicinesTypeOptions, row.medicinesType)
            },
            // 翻译处方类型
            prescriptionTypeFormatter(row) {
                return this.formatDict(this.prescriptionTypeOptions, row.prescriptionType)
            },
            // 翻译状态
            statusFormatter(row) {
                return this.formatDict(this.statusOptions, row.status)
            },
            // 翻译生产厂家
            producterFormatter(row) {
                let name = ''
                if (this.activeName === 'medicinesTab'){
                    this.producterOptions.filter(item => {
                        if (parseInt(item.producerId) === parseInt(row.producerId)) {
                            name = item.producerName
                        }
                    })
                    return name
                }else if (this.activeName === 'inventoryLogTab'){
                    this.producterOptions.filter(item => {
                        if (parseInt(item.producerId) === parseInt(row.producterId)) {
                            name = item.producerName
                        }
                    })
                    return name
                }
            },
            // 药品条件查询
            handleQuery() {
                if (this.activeName === 'medicinesTab') {
                    this.queryParams.currentPage=1
                    this.getMedicinesList()
                } else if(this.activeName === 'inventoryLogTab') {
                    this.queryLogParams.currentPage=1
                    this.getInventoryLogList()
                }
            },
            // 药品重置查询条件
            resetQuery() {
                if (this.activeName === 'medicinesTab') {
                    this.resetForm('queryForm')
                    this.queryParams.dateRange=[]
                    this.getMedicinesList()
                } else if (this.activeName === 'inventoryLogTab') {
                    this.resetForm('queryLogForm')
                    this.queryLogParams.createTime = []
                    this.getInventoryLogList()
                }
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                if (this.activeName === 'medicinesTab') {
                    this.queryParams.pageSize = val
                    this.getMedicinesList()
                } else if (this.activeName === 'inventoryLogTab') {
                    this.queryLogParams.pageSize = val
                    this.getInventoryLogList()
                }
            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                if (this.activeName === 'medicinesTab') {
                    this.queryParams.currentPage = val
                    this.getMedicinesList()
                } else if (this.activeName === 'inventoryLogTab') {
                    this.queryLogParams.currentPage = val
                    this.getInventoryLogList()
                }
            },
        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
